<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>贵阳轨道交通</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    
    <script type="text/javascript" src="./guiyang_subway_data.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ad17babae123cfc6568dd60e371ed512&plugin=AMap.Adaptor,AMap.Transfer,AMap.moveAnimation,AMap.Marker"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    
    <style>
      html,
      body,
      #container {
          width: 100%;
          height: 100%;
      } 
    </style>

</head>
<body>
 
<div id="container"  >
</div>  
<div id="panel"></div>

<script>
 /*var map = new AMap.Map("container", {
      resizeEnable: true,
      center: [106.675334,26.619512],
      zoom: 12,
     // viewMode: '3D',
     // pitch: 60,
     // mapStyle: 'amap://styles/whitesmoke',
  });*/

var map = new AMap.Map('container', {
         center: [106.675334,26.619512],
        viewMode: '3D',
        pitch: 60,
        rotation: -35,
        // 隐藏默认楼块
        features: ['bg', 'road', 'point'],
        mapStyle: 'amap://styles/light',
        
        zoom: 12
    });


var line_1_stop_maker = [];
var textStyle = {
    fontSize: 12,
    fontWeight: 'normal',
    fillColor: '#fff',
    // fillColor: 'rgb(255, 215, 0)',
    // strokeColor: '#fff',
    // strokeWidth: 2,
    // fold: true,
    padding: '2, 5',
    backgroundColor: 'rgb(246,137,38)',
    borderColor: '#fff',
    borderWidth: 1,
};

 for(var i in line_1_stop) {
    var item = line_1_stop[i];
    var stop_marker = new AMap.LabelMarker({
        name: item.name,
        position: [item.location[0], item.location[1]],
        text: {
            content: item.name,
            direction: 'center',
              style: textStyle,
             
        }
    });
    line_1_stop_maker.push(stop_marker);

 }

 map.add(line_1_stop_maker);

 
    var marker, line_1_path_arr = JSON.parse(JSON.stringify(line_1_path));

       
        // 创建一个 Icon
    var carIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(44, 44),
        // 图标的取图地址
        image: 'https://webapi.amap.com/images/car.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(22, 22), 
         offset: new AMap.Pixel(-26, -13),
    });


      marker = new AMap.Marker({
          map: map,
          position: [106.569271,26.653414],
            icon: carIcon,
         
          autoRotation: true,
          angle:-90,
      });

      // 绘制轨迹
      var polyline = new AMap.Polyline({
          map: map,
          path: line_1_path_arr,
          showDir:true,
          //strokeColor: 'rgb(134, 184, 28)',  //线颜色
          strokeColor: "#28F",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 5,      //线宽
    
          // strokeStyle: "solid"  //线样式
      });

      var passedPolyline = new AMap.Polyline({
          map: map,
          // path: lineArr,
          strokeColor: "#AF5",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
      });


      marker.moveAlong(line_1_path_arr, 10000);

      marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
      });

 
     // 创建一个 Icon
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
    });

    // 将 icon 传入 marker
    var startMarker = new AMap.Marker({
        position: new AMap.LngLat(line_1_start[0],line_1_start[1]),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
    });

    // 创建一个 icon
    var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
    });

    // 将 icon 传入 marker
    var endMarker = new AMap.Marker({
        position: new AMap.LngLat(line_1_end[0],line_1_end[1]),
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
    });

  // 将 markers 添加到地图
   map.add([   startMarker, endMarker]);



</script>
</body>
</html>